﻿@{ViewBag.Title = "Paging";}
@section CssImport{<link href="@Url.Content("~/Scripts/validationEngine/validationEngine.jquery.css")" rel="stylesheet" type="text/css" />}
@section JavascriptImport{
<script type="text/javascript" src="@Url.Content("~/Scripts/validationEngine/jquery.validationEngine.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/validationEngine/jquery.validationEngine-en.js")"></script>}
<div class="filtering"><form>
<label>Introduzca texto para filtrar: <input type="text" name="filter" id="filter" title="Buscar o Filtrar por Nombre"/></label>
<button type="submit" id="LoadRecordsButton" class="button medium orange" >Buscar Coincidencias</button>
</form></div>
<div id="MyTableContainer"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#MyTableContainer').jtable({
            title: 'AIT_Proveedor',
            paging: true,
            pageSize: 10,
            sorting: true,
            defaultSorting: 'Id ASC',
            actions: {
                listAction: '@Url.Action("JSONPagedListByFilter")',
            },
            fields:
         {
             Id: {
                 key: true,
                 list: false
             }
             ,
             Nombre: {
                 title: 'Nombre',
                 list: true,
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             Direccion: {
                 title: 'Direccion',
                 list: true,
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             Telefono: {
                 title: 'Telefono',
                 list: true,
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             Ciudad: {
                 title: 'Ciudad',
                 list: true,
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             TallerProveedor: {
                 title: 'Taller Proveedor',
                 width: '180px',
                 sorting: false,
                 edit: false,
                 create: false,
                 listClass: 'child-opener-image-column',
                 display: function (proveedorData) {
                     var $img = $('<img class="child-opener-image" with="20" height="20" src="@Url.Content("~/Content/images/menu/setting.png")" title="Taller Proveedor" />');
                     //Open child table when user clicks the image
                     $img.click(function () {
                         $('#MyTableContainer').jtable('openChildTable',
                                    $img.closest('tr'),
                                    {
                                        title: 'Taller Proveedor de : ' + proveedorData.record.Nombre,
                                        actions: {
                                            listAction: '@Url.Action("../AIT_TallerProveedor/TallerDeProveedor")?proveedorId=' + proveedorData.record.Id,
                                        },
                                        fields: {
                                            ProveedorId_FK: {
                                                type: 'hidden',
                                                defaultValue: proveedorData.record.Id
                                            },
                                            Id: {
                                                key: true,
                                                list: false
                                            }
                                            ,
                                            Direccion: {
                                                title: 'Direccion',
                                                list: true,
                                                inputClass: 'validate[required]',
                                                sorting: false
                                            }
                                            ,
                                            Telefono: {
                                                title: 'Telefono',
                                                list: true,
                                                inputClass: 'validate[required]',
                                                sorting: false
                                            }
                                            ,
                                            RegionId_FK: {
                                                title: 'AIT_Region',
                                                list: true,
                                                options: '@Url.Action("../AIT_Region/JSONGetElementsForDropDownList")'
                                            }
                                        }
                                    }, function (data) { //opened handler
                                        data.childTable.jtable('load');
                                    });
                     });
                     //Return image to show on the person row
                     return $img;
                 }
             }
         },
            formCreated: function (event, data) { data.form.validationEngine(); },
            formSubmitting: function (event, data) { return data.form.validationEngine('validate'); },
            formClosed: function (event, data) { data.form.validationEngine('hide'); data.form.validationEngine('detach'); }
        });
        $('#LoadRecordsButton').click(function (e) { e.preventDefault(); $('#MyTableContainer').jtable('load', { filter: $('#filter').val() }); });
        $('#LoadRecordsButton').click();
    });
</script>